<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="http://localhost/firstprojectyougou2/dist/lib/font/iconfont.css">
  <link rel="stylesheet" href="http://localhost/firstprojectyougou2/dist/css/list.min.css">
  <link rel="stylesheet" href="http://localhost/firstprojectyougou2/dist/css/goodDetail.min.css">
  <link rel="stylesheet" href="http://localhost/firstprojectyougou2/dist/css/public.min.css">
  <script type="text/javascript" src="http://localhost/firstprojectyougou2/dist/lib/jQueryDownload/jquery-1.11.3.min.js"></script>
</head>

<body>

  <!-- 顶部公共部分 -->
  <div id="header"></div>
  <!-- 顶部公共部分 -->


  <div class="goodDetail" id="sp1">
    <!-- 商品图 -->
    <div class="goodBlank">
      <!-- 商品侧边小图 -->
      <div class="goodSmallImg">
        <ul class="list_h">
          <li class="list_pic">
            <img class="small_pic" src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_01_t.jpg?3" alt="">
            <icon class="icon1"></icon>
          </li>
          <li class="list_pic">
            <img class="small_pic" src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_02_t.jpg?3" alt="">
            <icon class="icon1"></icon>
          </li>
          <li class="list_pic">
            <img class="small_pic" src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_03_t.jpg?3" alt="">
            <icon class="icon1"></icon>
          </li>
          <li class="list_pic">
            <img class="small_pic" src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_04_t.jpg?3" alt="">
            <icon class="icon1"></icon>
          </li>
          <li class="list_pic">
            <img class="small_pic" src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_05_t.jpg?3" alt="">
            <icon class="icon1"></icon>
          </li>
          <li class="list_pic">
            <img class="small_pic" src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_06_t.jpg?3" alt="">
            <icon class="icon1"></icon>
          </li>
          <li class="list_pic">
            <img class="small_pic" src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_07_t.jpg?3" alt="">
            <icon class="icon1"></icon>
          </li>
        </ul>
      </div>
      <!-- 商品图大图 -->
      <div class="goodBigImg">
        <div class="goodPic">
          <!-- 遮罩层 -->
          <span class="mark"></span>
          <span class="float_layer"></span>
          <ul class="bigPics">
            <li class="big_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_01_m.jpg?3" alt="">
            </li>
            <li class="big_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_02_m.jpg?3" alt="">
            </li>
            <li class="big_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_03_m.jpg?3" alt="">
            </li>
            <li class="big_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_04_m.jpg?3" alt="">
            </li>
            <li class="big_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_05_m.jpg?3" alt="">
            </li>
            <li class="big_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_06_m.jpg?3" alt="">
            </li>
            <li class="big_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_07_m.jpg?3" alt="">
            </li>
          </ul>

        </div>
        <div class="bigShow">
          <ul id="showPics">
            <li class="show_pic"><img class="thum_img"
                src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_01_l.jpg?3" alt="">
            </li>
            <li class="show_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_02_l.jpg?3" alt="">
            </li>
            <li class="show_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_03_l.jpg?3" alt="">
            </li>
            <li class="show_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_04_l.jpg?3" alt="">
            </li>
            <li class="show_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_05_l.jpg?3" alt="">
            </li>
            <li class="show_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_06_l.jpg?3" alt="">
            </li>
            <li class="show_pic"><img src="https://i1.ygimg.cn/pics/basto/2022/101563196/101563196_07_l.jpg?3" alt="">
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 商品售卖信息 -->
    <div class="goodInfo">
      <!-- 商品标题 -->
      <div class="goodLogo">
        <a href="">
          <img src="https://i1.ygimg.cn/pics/brandlogo/brandlogforcms/blackS-basto.png" alt="">
        </a>
      </div>
      <div class="goodTitle">百思图2022秋季新款商场同款潮流厚底小白鞋板鞋女休闲鞋YPQD2CM2
      </div>
      <!-- 商品价格 -->
      <div class="goodPrice">
        <span class="glyphicon glyphicon-jpy" id="icon2"></span>
        <span class="price_cur">381</span>
        <span class="price_past">899</span>
        <strong class="price_des">不支持使用优惠券</strong>
      </div>
      <!-- 商品打折活动信息 -->
      <div class="goodSale">
        <div class="sale1">
          <span class="clock">限时抢</span>
          <span id="validTime" class="tip">
            还剩
            <b></b>
            天
            <b></b>
            小时
            <b></b>
            分钟
            <b></b>
            秒
          </span>
        </div>
        <div class="sale2">
          <span class="gift">赠品</span>
          <span class="icon4"></span>
          <span class="giftTip">购买活动商品送以下任一赠品</span>
        </div>
      </div>
      <div class="summary_line"></div>
      <!-- 商品颜色选择 -->
      <div class="goodColor">
        <div class="color_name">颜色:</div>
        <div class="color_select">
          <a href="" class="select1" title="白色">
            <img src="https://i2.ygimg.cn/pics/basto/2022/101563196/101563196_01_c.jpg?3" alt="">
            <span class="icon5"></span>
          </a>
        </div>
      </div>
      <!-- 商品尺码选择 -->
      <div class="goodSize">
        <span class="size">尺码:</span>
        <span class="size_num">
          <a href="javascript:;" class="select" data-name="34">34
            <icon class="selection"></icon>
          </a>
          <a href="javascript:;" class="select" data-name="35">35
            <icon class="selection"></icon>
          </a>
          <a href="javascript:;" class="select" data-name="36">36
            <icon class="selection"></icon>
          </a>
          <a href="javascript:;" class="select" data-name="37">37
            <icon class="selection"></icon>
          </a>
          <a href="javascript:;" class="select" data-name="38">38
            <icon class="selection"></icon>
          </a>
          <a href="javascript:;" class="select" data-name="39">39
            <icon class="selection"></icon>
          </a>
          <a href="javascript:;" class="select" data-name="40">40
            <icon class="selection"></icon>
          </a>
        </span>
        <span class="size_view_table">
          <a href="" id="compare_size_link">
            <span class="icon6"></span>
            查看尺码表>>
          </a>
        </span>
      </div>
      <!-- 商品加购数量 -->
      <div class="goodNum">
        <span class="num_name">数量:</span>
        <div class="inputContent">
          <input type="hidden" name="oldNum" class="oldNum">
          <input type="text" value="1" class="cart_num" id="input_num">
        </div>
        <div class="buttons">
          <a href="javascript:;" class="add">
            <icon class="up"></icon>
          </a>
          <a href="javascript:;" class="reduce">
            <icon class="down"></icon>
          </a>
        </div>
      </div>
      <!-- 商品购买按钮 -->
      <div class="buys">
        <ul class="list">
          <li><a href="javaScript:;" id="addCart">加入购物袋</a></li>
          <li><a href="http://localhost/firstprojectyougou2/dist/html/cart.html" id="immediate_buy">立即购买</a></li>
        </ul>
      </div>
      <!-- 商品分享按钮 -->
      <div class="share">
        <a href=""><span class="glyphicon glyphicon-heart"></span>收藏</a></span>
        <a href=""><span class="glyphicon glyphicon-share"></span>分享</a></span>
      </div>
    </div>
  </div>
  <!-- 商品介绍 -->
  <!-- 商品信息 -->
  <div id="introduce">

    <div class="info_title title">商品信息</div>
    <div class="intro_form">
      <table>
        <tr>
          <td>鞋帮:低帮</td>
          <td>鞋底材质:橡胶发泡底</td>
          <td>内增高:无</td>
          <td>鞋面材质:牛皮革</td>
          <td>闭合方式:前系带</td>
        </tr>
        <tr>
          <td>货品来源:外购</td>
          <td>配跟:无</td>
          <td>上市时间:2022年秋季</td>
          <td>鞋类流行款式:小白鞋</td>
          <td>鞋头款式:圆头</td>
        </tr>
        <tr>
          <td>鞋面图案:纯色</td>
          <td>鞋跟形状:厚底</td>
          <td>参考鞋长(女):24CM</td>
          <td>流行元素:纯色</td>
          <td>参考鞋宽(女):8CM</td>
        </tr>
        <tr>
          <td>风格:休闲</td>
          <td>色系:白色</td>
          <td>跟高数值:2.5CM</td>
          <td>性别:女子</td>
          <td>里料材质:织物面料猪皮革</td>
        </tr>
        <tr>
          <td>制鞋工艺:胶贴皮鞋</td>
          <td>鞋垫材质:猪皮革</td>
          <td>款式季节:秋季</td>
          <td>前掌高度:1.5CM</td>
          <td>皮质特征:牛皮革</td>
        </tr>
        <tr>
          <td colspan="5">防水台高度:无</td>
          <!-- <td></td>
        <td></td>
        <td></td>
        <td></td> -->
        </tr>
      </table>
    </div>
  </div>
  <!-- 尺码信息 -->
  <div id="size_info">
    <div class="size_title title">尺码信息</div>
    <div class="size_form">
      <table>
        <tr width="15.8667rem" height="1.0733rem">
          <td>法国码</td>
          <td>32</td>
          <td>33</td>
          <td>34</td>
          <td>35</td>
          <td>36</td>
          <td>37</td>
          <td>38</td>
          <td>39</td>
          <td>40</td>
          <td>41</td>
          <td>42</td>
        </tr>
        <tr>
          <td>国际码</td>
          <td>210</td>
          <td>215</td>
          <td>220</td>
          <td>225</td>
          <td>230</td>
          <td>235</td>
          <td>240</td>
          <td>245</td>
          <td>250</td>
          <td>255</td>
          <td>260</td>
        </tr>
      </table>
    </div>
  </div>
  <!-- 商品详情 -->
  <div id="detail_info">
    <div class="detail_title title">商品详情</div>
    <div class="imgs_list">
      <ul>
        <li><img src="../img/detail/100.jpg" alt=""></li>
        <li><img src="../img/detail/101.jpg" alt=""></li>
        <li><img src="../img/detail/102.jpg" alt=""></li>
        <li><img src="../img/detail/103.jpg" alt=""></li>
        <li><img src="../img/detail/104.jpg" alt=""></li>
        <li><img src="../img/detail/105.jpg" alt=""></li>
        <li><img src="../img/detail/106.jpg" alt=""></li>
        <li><img src="../img/detail/107.jpg" alt=""></li>
        <li><img src="../img/detail/108.jpg" alt=""></li>
        <li><img src="../img/detail/109.jpg" alt=""></li>
        <li><img src="../img/detail/110.jpg" alt=""></li>
      </ul>
    </div>
    <div class="foot_banner">
      <img src="../img/detail/111.jpg" alt="">
    </div>
  </div>
  <!-- 商品评价 -->
  <div id="assess_info">
    <div class="ass_title title">商品评价</div>
    <div class="ass_content">
      <p class="p1">该商品暂无点评。<br>
        <strong class="p2">赶快来发表第一个点评吧!</strong>
        <span class="write">
          <a href="">我要写点评</a>
        </span>
      </p>

    </div>
  </div>

  <div class="likeSlider" style= "margin: 0 auto;width: 1190px;">
<iframe src="http://localhost/firstprojectyougou2/dist/public/lBt.html" frameborder="0" width=" 100%" height=" 650px"></iframe>
</div>

  <!-- 底部公共部分 -->
  <!-- 公共尾部 -->
  <div id="footer"></div>
  <!-- 底部公共部分 -->







  <!-- <script src="../js/jQueryDownload/jquery-1.12.4.js"></script> -->
  <!-- <script>
		//轮播图外部引用
		// 新品推荐部分
		// 新品推荐商品部分  
		$(function () {
			// 获取元素
			// 男女鞋按钮
			var $shoe = $('#new_products .command-title .tabs .shoe');
			// 运动按钮
			var $active = $('#new_products .command-title .tabs .active');
			// 男女鞋商品显示部分盒子
			var $news_wrap = $('#new_products .new_products_shop .news_wrap');
			// console.log($news_wrap);
			//运动商品部分隐藏部分盒子
			var $news_wrap1 = $('#new_products .new_products_shop .news_wrap1');
			// console.log($news_wrap1);

			// 获取显示
			// 上一个按钮
			var $prev = $('#new_products .new_products_shop .news_wrap .shop_left_button');
			// console.log($prev1);
			//下一个按钮
			var $next = $('#new_products .new_products_shop .news_wrap .shop_right_button');
			// 获取隐藏
			// 上一个按钮
			var $prev1 = $('#new_products .new_products_shop .news_wrap1 .shop_le_button');
			// console.log($prev1);
			//下一个按钮
			var $next1 = $('#new_products .new_products_shop .news_wrap1 .shop_rig_button');
			// 获取显示ul
			var $ul = $('#new_products .new_products_shop .news_wrap ul')
			// 获取隐藏ul
			var $ul1 = $('#new_products .new_products_shop .news_wrap1 ul')
			// 获取li
			var $ul_li = $('#new_products .new_products_shop .news_wrap ul li');
			var $ul1_li = $('#new_products .new_products_shop .news_wrap1 ul li');
			// li 的数量
			var num = $ul_li.length
			// console.log(num / 4)
			var num1 = $ul1_li.length
			// console.log(num1 / 4)
			// 下标
			var timer = 0;
			var timer1 = 0
			// console.log(timer1);
			// 显示商品  
			$shoe.click(function () {
				$news_wrap.css({
					'display': 'block',
				})
				$news_wrap1.css({
					'display': 'none',
				})
			})
			// 隐藏部分
			$active.click(function () {
				$news_wrap1.css({
					'display': 'block',
				})
				$news_wrap.css({
					'display': 'none',
				})
			})

			// 显示部分点击轮播
			$next.click(function () {
				timer++;
				// console.log(timer);
				$ul.animate({
					left: '-=990px',
				}, 1000)
				if (timer < num / 4 - 1) {
					$next.on('click');
				} else {
					$next.off("click",);
				}
				console.log(timer)
			})

			$prev.click(function () {
				timer--;
				$ul.animate({
					left: "+=990px",
				}, 1000)
				if (timer > 0) {
					$prev.on('click');
				} else if (timer <= 0) {
					$prev.off('click');
				}
				// console.log(timer) 
			})
			// 隐藏部分点击轮播
			$next1.click(function () {
				timer1++;
				// console.log(timer);
				$ul1.animate({
					left: '-=990px',
				}, 1000)
				if (timer1 < num1 / 4 - 1) {
					$next1.on('click');
				} else {
					$next1.off("click",);
				}
				// console.log(timer1)
			})

			$prev1.click(function () {
				timer1--;
				$ul1.animate({
					left: "+=990px",
				}, 1000)
				if (timer1 > 0) {
					$prev1.on('click');
				} else if (timer1 <= 0) {
					$prev1.off('click');
				}
				// console.log(timer) 
			})
		})

	</script> -->
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
  <script src="http://localhost/firstprojectyougou2/dist/js/goodDetail.min.js"></script>
  <!-- <script src="../src/lib/jquery-1.12.4.js"></script> -->
  <script src="http://localhost/firstprojectyougou2/dist/js/public.min.js"></script>
  <script>
    // 头部引入
    $('#header').load("http://localhost/firstprojectyougou2/dist/html/public.html #head");
    // 引入尾部
    $('#footer').load("http://localhost/firstprojectyougou2/dist/html/public.html #foot");
  </script>

  <!-- <script src="../js/goodDetail.js"></script> -->
</body>

</html>